<template>
  <div class="home-blog">
    <div class="hero" :style="{ ...bgImageStyle }">
      <div class="mask" :style="{
  background: `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                url(${$frontmatter.bgImage ?
            $withBase($frontmatter.bgImage) :
      $withBase(useRandomImage())}) center/cover no-repeat
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              `
      }"></div>
      <ModuleTransition>
        <img v-if="recoShowModule && $frontmatter.heroImage" :style="heroImageStyle || {}"
          :src="$withBase($frontmatter.heroImage)" alt="hero" />
      </ModuleTransition>
      <!-- <ModuleTransition delay="0.04">
            <h1 v-if="recoShowModule && $frontmatter.heroText !== null">
              {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
            </h1>
          </ModuleTransition> -->

      <!-- <ModuleTransition delay="0.08">
        <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
          {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
        </p>
      </ModuleTransition> -->
      <p class="description">
        <span id="boxs"></span>
      </p>
      <Bubbles :options="effects" v-if="bubbles"></Bubbles>
      <FloatingArrow @onClick="goDown" />
      <div id="maps" style="pointer-events:auto;display: inline;" v-if="isPC">
        <div style="position: fixed; width: 300px; height: 300px; right: 20px; bottom: 0px; z-index:999;">
          <script type="text/javascript"
            src="//rf.revolvermaps.com/0/0/6.js?i=5sjxwyomose&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;rs=80"
            async="async"></script>
        </div>
      </div>
    </div>

    <ModuleTransition delay="0.16">
      <div v-show="recoShowModule" class="home-blog-wrapper">
        <div class="blog-list">
          <!-- 博客列表 -->
          <note-abstract :data="$recoPosts" :currentPage="currentPage"></note-abstract>
          <!-- 分页 -->
          <pagation class="pagation" :total="$recoPosts.length" :currentPage="currentPage"
            @getCurrentPage="getCurrentPage" />
        </div>
        <div class="info-wrapper" style="overflow: visible;">
          <PersonalInfo />
          <h4><i class="iconfont reco-category"></i> {{ homeBlogCfg.category }}</h4>
          <ul class="category-wrapper">
            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
              <router-link :to="item.path">
                <span class="category-name">{{ item.name }}</span>
                <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
              </router-link>
            </li>
          </ul>
          <hr>
          <h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> {{ homeBlogCfg.tag }}</h4>
          <TagList @getCurrentTag="getPagesByTags" />
          <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i>
            {{ homeBlogCfg.friendLink }}</h4>
          <FriendLink />
        </div>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.24">
      <Content v-show="recoShowModule" class="home-center" custom />
    </ModuleTransition>
  </div>
</template>

<script>
import TagList from '@theme/components/TagList'
import FriendLink from '@theme/components/FriendLink'
import NoteAbstract from '@theme/components/NoteAbstract'
import pagination from '@theme/mixins/pagination'
import ModuleTransition from '@theme/components/ModuleTransition'
import PersonalInfo from '@theme/components/PersonalInfo'
import { getOneColor } from '@theme/helpers/other'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'

export default {
  mixins: [pagination, moduleTransitonMixin],
  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo },
  data() {
    return {
      recoShow: false,
      currentPage: 1,
      tags: [],
      options: {
        strings: [
          '人生之艰难,就像那不息之长河',
          '虽有东去大海之志,却流程缓慢,征程多艰',
          '然,江河水总有入海之时,而人生之志却常常难以实现',
          '令人抱憾终生'
        ],
        typeSpeed: 150, // 打印速度
        startDelay: 300, // 开始之前的延迟300毫秒
        backSpeed: 150, // 回退速度
        backDelay: 1000, // 回退之前的延迟1000毫秒
        loop: true, // 是否循环
      },
      effects: {
        color: 'rgba(225,225,225,0.5)', //气泡颜色
        radius: 15, //气泡半径
        densety: 0.3, // 气泡密度 越大越密集(建议不要大于1)
        clearOffset: 0.1 // 气泡消失距离[0-1] 越大越晚消失
      },
      isPC: true,
      bubbles: null,
    }
  },
  computed: {
    homeBlogCfg() {
      return this.$recoLocales.homeBlog
    },
    actionLink() {
      const {
        actionLink: link,
        actionText: text
      } = this.$frontmatter

      return {
        link,
        text
      }
    },
    heroImageStyle() {
      return this.$frontmatter.heroImageStyle || {
        maxHeight: '200px',
        margin: '6rem auto 1.5rem'
      }
    },
    bgImageStyle() {
      const initBgImageStyle = {
        height: '350px',
        textAlign: 'center',
        overflow: 'hidden'
      }
      const {
        bgImageStyle
      } = this.$frontmatter

      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
    },
    heroHeight() {
      return document.querySelector('.hero').clientHeight
    }
  },
  mounted() {
    this.recoShow = true
    this._setPage(this._getStoragePage())

    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.isPC = false
    } else {
      this.isPC = true
    }
    import('typed.js').then(module => {
      const Typed = module.default
      new Typed("#boxs", this.options);
    })
    import("vue-canvas-effect").then(module => {
      this.bubbles = module.default.Bubbles
      // 注册为局内组件
      this.$options.components.Bubbles = this.bubbles
    });
  },
  methods: {
    // 获取当前页码
    getCurrentPage(page) {
      this._setPage(page)
      setTimeout(() => {
        window.scrollTo(0, this.heroHeight)
      }, 100)
    },
    // 根据分类获取页面数据
    getPages() {
      let pages = this.$site.pages
      pages = pages.filter(item => {
        const { home, date } = item.frontmatter
        return !(home == true || date === undefined)
      })
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages
    },
    getPagesByTags(tagInfo) {
      this.$router.push({ path: tagInfo.path })
    },
    _setPage(page) {
      this.currentPage = page
      this.$page.currentPage = page
      this._setStoragePage(page)
    },
    getOneColor,
    goDown() {
      const height = document.documentElement.clientHeight;
      window.scrollTo(0, height);
    },
  }
}
</script>

<style lang="stylus">
.home-blog {
  // padding: $navbarHeight 0 0;
  margin: 0px auto;

  .hero {
    position relative
    .mask {
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      z-index -1
      &:after {
        display block
        content ' '
        background var(--mask-color)
        position absolute
        top 0
        bottom 0
        left 0
        right 0
        z-index 0
        opacity .2
      }
    }
    figure {
      position absolute
      background yellow
    }

    h1 {
      // margin:7rem auto 1.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -300%)!important;
      font-size: 2.5rem;
    }

    h1, .description, .action, .huawei {
      color #fff
    }

    .description {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%)!important;
      font-size: 1.6rem;
      line-height: 1.3;
    }
  }
  .home-blog-wrapper {
    display flex
    align-items: flex-start;
    margin 20px auto 0
    max-width $homePageWidth
    .blog-list {
      flex auto
      width 0
      .abstract-wrapper {
        .abstract-item:last-child {
          margin-bottom: 0px;
        }
      }
    }
    .info-wrapper {
      position -webkit-sticky;
      position sticky;
      top 70px
      overflow hidden
      transition all .3s
      margin-top 15px
      margin-left 15px
      flex 0 0 300px
      height auto
      box-shadow var(--box-shadow)
      border-radius $borderRadius
      box-sizing border-box
      padding 0 15px
      background var(--background-color)
      &:hover {
        box-shadow var(--box-shadow-hover)
      }
      h4 {
        color var(--text-color)
      }
      .category-wrapper {
        list-style none
        padding-left 0
        .category-item {
          margin-bottom .4rem
          padding: .4rem .8rem;
          transition: all .5s
          border-radius $borderRadius
          box-shadow var(--box-shadow)
          background-color var(--background-color)
          &:hover {
            transform scale(1.04)
          }
          a {
            display flex
            justify-content: space-between
            .post-num {
              width 1.6rem;
              height 1.6rem
              text-align center
              line-height 1.6rem
              border-radius $borderRadius
              background #eee
              font-size 13px
              color #fff
            }
          }
        }
      }
    }
  }
}

@media (max-width: $MQMobile) {
  .home-blog {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    .hero {
      margin 0 -1.5rem
      height 450px
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 6rem auto 1.8rem ;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }
    .home-blog-wrapper {
      display block!important
      .blog-list {
        width auto
      }
      .info-wrapper {
        // display none!important
        margin-left 0
        .personal-info-wrapper {
          display none
        }
      }
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home-blog {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .hero {
      margin 0 -1.5rem
      height 350px
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 6rem auto 1.8rem ;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display block!important
      .blog-list {
        width auto
      }
      .info-wrapper {
        // display none!important
        margin-left 0
        .personal-info-wrapper {
          display none
        }
      }
    }
  }
}
#boxs {
  font-size: 1.8rem;
  line-height: 1.3;
  color: #fff;
  font-family: Long Cang, cursive;
}

.typed-cursor {
  font-size: 1.8rem;
  color: #ddd;
}
</style>
